import React from 'react';

export interface CurrencyInputProps {
    amount: number;
    currency: string;
    currencies: string[];
    onAmountChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onCurrencyChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    readOnly?: boolean;
}

const CurrencyInput: React.FC<CurrencyInputProps> = ({
    amount,
    currency,
    currencies,
    onAmountChange,
    onCurrencyChange,
    readOnly = false
}) => {
    return (
        <div className="currency-input">
            <input
                type="number"
                value={amount}
                onChange={onAmountChange}
                disabled={readOnly}
                className={readOnly ? 'readonly' : ''}
            />
            <select
                value={currency}
                onChange={onCurrencyChange}
                disabled={readOnly}
            >
                {currencies.map((curr) => (
                    <option key={curr} value={curr}>
                        {curr}
                    </option>
                ))}
            </select>
        </div>
    );
};

export default CurrencyInput;   